<template>
  <header class="header">
    <div class="l-content">
      <el-button
        type="primary"
        icon="el-icon-menu"
        style="margin-right: 30px"
        @click="collapseMenu"
      ></el-button>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/layout' }" class="bread">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="current.path" v-if="current">
          {{ current.label }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <div class="r-content">
	        <el-dropdown trigger="click" @command="setDialogInfo">
	          <span class="el-dropdown-link">
	            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
	          </span>
	          <el-dropdown-menu slot="dropdown">
	            <el-dropdown-item command="info">个人中心</el-dropdown-item>
	            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
	          </el-dropdown-menu>
	        </el-dropdown>
	    </div>  -->
    <div class="header-right">
      <ul class="header-nav">
        <li class="header-nav-item">
          <span @click="goDia" href="">
            <i class="el-icon-plus"></i>
          </span>
        </li>
        <li class="header-nav-item" >
          <span @click="goPatient" href="">
            <i class="el-icon-chat-square"></i>
          </span>
        </li>
        <li class="header-nav-item" >
          <span href="" @click="goAppointment">
            <i class="el-icon-timer"></i>
          </span>
        </li>
        <li class="header-nav-item" @click="goWMedicine">
          <span href="">
            <i class="el-icon-box"></i>
          </span>
        </li>
        <li class="header-nav-item" @click="GoUserPanel">
          <span href="">{{ realName }}</span>
        </li>
        <li class="header-nav-item" @click="goLogin">
          <span href="">退出</span>
        </li>
      </ul>
    </div>
  </header>
</template>
<script>
import { mapState } from "vuex";
export default {
  data(){
    return{
      realName:"",
      userID:sessionStorage.getItem('userID'),
    }
  },
  computed: {
    ...mapState({
      current: (state) => state.tab.currentMenu,
    }),
  },
  created(){
    this.getName()
  },
  methods: {
    //根据登录的userID获取姓名
    getName(){
      this.$axios({
      methods:"get",
      url:"/userManagement/user/findUserById",
      params:{
        id:this.userID
      },
    }).then(res=>{
      // console.log('0000000000000',res.data.data.realName);
      this.realName=sessionStorage.getItem('username');
    })
    },
   
    //控制左侧菜单是否折叠
    collapseMenu() {
      this.$store.commit("collapseMenu");
    },
    // 下拉框选择，点击个人信息后调整到对应的函数执行
    // setDialogInfo(comItem) {
    //   switch (comItem) {
    //     case "info":
    //       this.showInfoList();
    //       break;
    //     case "logout":
    //       this.logout();
    //       break;
    //   }
    // },
    // //展示个人信息
    // showInfoList() {
    //   this.$alert(
    //     `<div>
    //         名称：admin
    //         <br/>
    //         身份：管理员
    //       </div>`,
    //     "个人名片",
    //     {
    //       dangerouslyUseHTMLString: true,
    //     }
    //   );
    // },
    // logout() {
    //   this.$confirm("确定退出登录吗?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning",
    //   })
    //   .then(() => {
    //        this.$message.success("退出成功")
    //   })
    //   .catch(() => {
    //       return;
    //   });t
    // }
    //跳转登录
    goLogin() {
	  localStorage.setItem('menu','')
	  sessionStorage.setItem('tokenStr','')
	  localStorage.setItem('Authorization','')
    sessionStorage.setItem('userID','')
    sessionStorage.setItem('username','')
    this.$router.push("/login");
    },
    //跳转诊断管理
    goDia(){
      this.$router.push("/diagnosis/diaManage");

    },
    //跳转患者管理
    goPatient(){
      this.$router.push("/patient/paManage");

    },
    //跳转预约
    goAppointment() {
      this.$router.push("/appointment/appManage");
    },
    //跳转药品
    goWMedicine() {
      this.$router.push("/medicine/medManage");
    },





    
    //跳转个人中心
    GoUserPanel() {
      this.$router.push("/userPanel");
    },

    changeMenu() {
      this.$emit("changeMenu");
    },
    go() {
      this.router.push({
        name: "noAccess",
      });
    },
  },
};
</script>
<style scoped>
.header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
.l-content {
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.el-dropdown {
  color: #fff;
}
.el-breadcrumb /deep/ .el-breadcrumb__inner {
  color: #fff !important;
}
.el-breadcrumb__inner span {
  color: #fff !important;
}

.header-right {
  text-align: right;
  flex: 1;

  font-size: 15px;
}

.header-nav {
  display: flex;
  float: right;
}
.header-nav-item {
  border: 1px solid #f0f0f0;
  border-top: none;
  border-bottom: none;
}

.header-nav-item span {
  padding: 0 20px;
  text-decoration: none;
  color: #c2c2c2;
  display: block;
  font-size: 20px;
}
.bread{
  cursor: pointer;
}
</style>
